/* components */
import { 
  BaseSelectUserSelectPanelContainer, 
  BaseSelectUserSelectPanelLeft, 
  BaseSelectUserSelectPanelRight,
  BaseSelectUserServiceProviderLeft,
  BaseSelectUserServiceProviderRight 
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { 
  BaseSelectUserComponentNameEnum, 
  BaseSelectUserFetchDebounceTime, 
  SelectUserComponentServiceProvider 
} from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { 
  useBaseSelectUserFilter,
  useBaseSelectUserServiceProviderUserListParams,
  useFetchServiceProviderListAndServiceProviderUserList,
  useFetchServiceProviderQualificationList, 
  useFetchServiceProviderTypeList, 
  useFetchServiceProviderUserList, 
  useSelectUserRoleUserList, 
  useSelectUserServiceProviderUserList,
  useServiceProviderNavList
} from '@src/component/common/BaseSelectUser/hooks'
/* hooks */
import { useFetchServiceProviderList } from '@src/component/common/BaseSelectUser/hooks'
import { 
  useBaseSelectUserStoreCurrentToggleServiceProvider, 
  useBaseSelectUserStoreFilterNeedUpdateMap, 
  useBaseSelectUserStoreLoadingMap, 
  useBaseSelectUserStoreServiceProviderList, 
  useBaseSelectUserStoreUserListMap 
} from '@src/component/common/BaseSelectUser/store'
/* model */
import { BaseSelectUserBreadCrumbItem } from '@src/component/common/BaseSelectUser/components/BreadCrumb/model'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, onBeforeMount, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { debounce } from 'lodash'
import { isEmpty, isFalse } from '@src/util/type'
import { findComponentDownward } from '@src/util/assist'
import Log from '@src/util/log'

export type ServiceProviderTabProps = {
  isMulti: boolean;
}

export interface ServiceProviderTabSetupState {
  
}

export enum ServiceProviderTabEmitEventNameEnum {
  Input = 'input',
}

export type ServiceProviderTabInstance = ComponentInstance & ServiceProviderTabSetupState
export type ServiceProviderTabVM = ComponentRenderProxy<ServiceProviderTabProps> & CommonComponentInstance & ServiceProviderTabInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderTab,
  emits: [
    ServiceProviderTabEmitEventNameEnum.Input
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: ServiceProviderTabProps, { emit }) {
    
    // 获取服务商和服务商人员列表
    const fetchServiceProviderListAndServiceProviderUserList = useFetchServiceProviderListAndServiceProviderUserList()
    // 获取服务商资质列表
    const fetchServiceProviderQualificationList = useFetchServiceProviderQualificationList()
    // 获取服务商类型列表
    const fetchServiceProviderTypeList = useFetchServiceProviderTypeList()
    
    // 初始化
    const initiate = () => {
      fetchServiceProviderListAndServiceProviderUserList()
      fetchServiceProviderQualificationList()
      fetchServiceProviderTypeList()
    }
    
    onBeforeMount(() => {
      initiate()
    })
    
  },
  methods: {
    onLoadServiceProviderListHandler() {
      
      const baseSelectUserInfiniteScrollUserComponent = findComponentDownward(this, BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser)
      
      try {
        baseSelectUserInfiniteScrollUserComponent.$el.scrollTop = 0
      } catch (error) {
        Log.error(error, this.onLoadServiceProviderListHandler.name)
      }
      
    }
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderTab}>
        
        <BaseSelectUserSelectPanelContainer>
          
          <BaseSelectUserSelectPanelLeft>
            <BaseSelectUserServiceProviderLeft 
              is-multi={this.isMulti} 
              onLoadUser={this.onLoadServiceProviderListHandler}
            />
          </BaseSelectUserSelectPanelLeft>
          
          <BaseSelectUserSelectPanelRight>
            <BaseSelectUserServiceProviderRight is-multi={this.isMulti} />
          </BaseSelectUserSelectPanelRight>
          
        </BaseSelectUserSelectPanelContainer>
        
      </div>
    )
    
  }
})
